:root {
    --navbar_color: #567e93;
    --navbar_hover_color: #2b384b;
    --navbar_active_color: #45566f;
    --article_color: #f6f8f9;

    --text_color: #393942;

    --plain_text_font: "Open Sans", Arial, sans-serif;
    --title_text_font: "Open Sans", Arial, sans-serif;

    --plain_text_size: 20px;
    --title_text_size: 30px;

    --line_height: 1.4;

    --block_spaces: 30px;
    --between_spaces: 30px;
    --between_spaces_10: 3;
    --padding_spaces: 30px;
    --margin_spaces: 30px;

    --vertical_margin_spaces: 30px;
    --vertical_padding_spaces: 30px;

    --grid_rows_10: 114;
    --main_grid_rows_10: 78;
    --small_grid_rows_10: 33;

    --grid_complete: 1fr repeat(114, 10px) 1fr;


    --main_grid_size: 780px;
    --small_grid_size: 330;

    --recent_article_grid_size: 720px;

    --complete_grid_column: 2/116;
    --main_grid_column: 2/80;
    --side_column_grid_column: 83 /116;

}

@media only screen and (max-width: 1200px) {
    :root {
        --grid_rows_10: 96;
        --main_grid_rows_10: 66;
        --small_grid_rows_10: 27;

        --grid_complete: 1fr repeat(96, 10px) 1fr;


        --main_grid_size: 660px;
        --small_grid_size: 270;

        --recent_article_grid_size: 600px;

        --complete_grid_column: 2/98;
        --main_grid_column: 2/68;
        --side_column_grid_column: 71 /98;

    }
}

@media only screen and (max-width: 970px) {
    :root {
        --grid_complete: 1fr;
        --main_grid_size: 1fr;
        --small_grid_size: 1fr;
        --recent_article_grid_size: 1fr;
        --complete_grid_column: 1/2;
        --main_grid_column: 1/2;
        --side_column_grid_column: 1/2;
        --padding_spaces: 20px;
        --margin_spaces: 20px;
    }

}

.titleLink{
    text-decoration: none;

}

i {
    font-family: Liberation Sans;
    color: #51515a;
    /*font-family: Arial Narrow;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title_text_font);
    /*font-size: var(--title_text_size);*/
    line-height: var(--line_height);
    color: var(--text_color);
}
h1{
    font-size: var(--title_text_size);
}

p {
    font-family: var(--plain_text_font);
    font-size: var(--plain_text_size);
    line-height: var(--line_height);
    color: var(--text_color);

}

div {
    font-family: var(--plain_text_font);
    font-size: var(--plain_text_size);
    line-height: var(--line_height);
    color: var(--text_color);
}

.homegrid {
    display: grid;
    grid-template-columns: var(--grid_complete);
}


.section {
    clear: left;
}

.navgrid {
    display: grid;
    grid-template-columns: var(--grid_complete);
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--navbar_color);
    grid-column: var(--complete_grid_column);
    grid-row: 2/3;
}

.navbar > li {
    float: left;
}

.hamitems > a {
    float: left;

    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.hamitems > a:hover {
    background-color: var(--navbar_hover_color);
}

.navbar > label, #hamburger {
    display: none;
}

.navbar > li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar > li a:hover {
    background-color: var(--navbar_hover_color);
}

.navbar_active {
    background-color: var(--navbar_active_color);
}

.logoLink {
    grid-column: var(--complete_grid_column);
    grid-row: 1/2;
}

.mainArticle {
    grid-column: var(--main_grid_column);
    margin-top: var(--margin_spaces);
    background-color: var(--article_color);
}

.mainImage {

}

.mainTitle {
    text-align: center;
}

.mainText {
    text-align: justify;
    font-size: var(--plain_text_size);

}

.recentArticles {
    margin-top: var(--margin_spaces);
    grid-column: var(--main_grid_column);

}

.recentArticle {
    width: var(--recent_article_grid_size);
    /*height: 240px;*/
    padding: var(--padding_spaces);
    padding-top: 0px;
    margin-bottom: var(--margin_spaces);
    background-color: var(--article_color);
}

/*
.recentImage {
    grid-column: 1/31;
    grid-row: 1/21;
}*/
.recentTitle {
    /*
    grid-column: 1/31;
    grid-row: 22/26;*/
    /*background-color: #cadfa8;*/
    /*padding-top: 5px;*/
    text-align: center;
    line-height: 1;
    /*font-size: medium;*/
    /*line-height=1;*/
}

.recentTitle > h2 {
    margin: 0px;
}

.recentText {
    /*
    grid-column: 1/31;
    grid-row: 27/47;*/
    /*background-color: #cadfa8;*/
    font-size: var(--plain_text_size);
}

.articleImg {
    width: 100%;
}


.recentImage {
    float: left;
    width: 40%;
    padding-right: var(--padding_spaces);
}

.articleImgSmall {

    /*height: 200px;*/
    width: 100%;

}

.recentText > p {
    margin-bottom: 0px;
}

.artclImg {
    width: 100%;
}

.articleGrid {
    grid-column: var(--main_grid_column);
    display: grid;
    grid-template-columns: var(--main_grid_size);
}

.articleImage {
    padding-right: var(--padding_spaces);
    padding-bottom: var(--padding_spaces);
    width: 600px;
    height: 400px;
}

.articleDisplay {
    padding: var(--padding_spaces);
    margin-top: var(--margin_spaces);
    /*margin-bottom: var(--margin_spaces);*/
    grid-column: 1/2;
    background-color: var(--article_color);
}

.articleDisplay > h1,.articleDisplay >h2,.articleDisplay >h3,.articleDisplay >h4,.articleDisplay >h5 {
    margin: 0px;
    padding: 0px;
}

.articleTitle {
    display: flex;
    align-items: center;
    justify-content: center;
}


.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}


textarea {
    font-family: Sans Serif;
    white-space: pre-wrap;
    line-height: var(--line_height);
}

.sideColumn {
    grid-column: var(--side_column_grid_column);
    grid-row: 1/3;

    margin-top: var(--margin_spaces);
    margin-bottom: var(--margin_spaces);

    display: flex;
    flex-direction: column;

}

.sideDiv {
    background-color: var(--article_color);
    margin-bottom: var(--margin_spaces);
    padding: var(--padding_spaces);
}

.article_details {
    list-style: none;
    margin: 0px;
    padding-left: 10px;
    font-size: 16px;
}

.article_details_small {
    list-style: none;
    margin: 0px;
    padding-left: var(--padding_spaces);
}


.article_details > li {
    display: inline;
    color: gray;
}

.article_details > li > a {
    display: inline;
    color: #335b6f;
}

.article_details_small > li {
    display: block;
    color: gray;
}

hr {
    color: #d0d0d0;
}

.hrSmall {
    margin-top: 5px;
    margin-bottom: 5px;

}

.generalBlock {
    background-color: var(--article_color);
    box-shadow: 0 0 5px #dbe8ec;
    padding: var(--padding_spaces);
    /*box-shadow: 0 0 5px #a1bb73;*/
    /*box-shadow: 5px 5px 5px grey;*/
}

br {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 10px; /* change this to whatever height you want it */
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    hyphens: auto;
}

.sideImg {
    float: left;
    width: 100%;
    padding-right: var(--padding_spaces);
    margin-bottom: var(--margin_spaces);
}

.hrSide {
    clear: both;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.pagination {
    display: inline-block;
}

.pagination a {
    color: var(--text_color);
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination div {
    color: var(--text_color);
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

.pagination a.active {
    background-color: var(--navbar_active_color);
    color: white;
}

.pagination a:hover:not(.active) {
    background-color: var(--navbar_hover_color);
    color: white;
}

.center {
    text-align: center;
}

}

.clearfix {
    clear: both;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

.current_section_burger {

    display: none;

}

.sideSuggestions{
    display: flex;
    flex-direction: column;
}
.sideTitle{
    order:-1;
}

h1,h2,h3,h4,h5,h6{
    margin-top:0px;
}

@media only screen and (max-width: 970px) {

    .sideSuggestions{
        order: -2;
    }

    .sideColumn {
        padding-top: 0px;
    }

    .current_section_burger {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 10px 16px;
        padding-bottom: 0px;
        text-decoration: none;

    }

    .recentImage {
        /*padding-right:0px;*/

    }

    .articleImgSmall {

        height: auto;
        width: 100%;

    }

    .sideColumn {
        grid-row: auto/auto;
    }

    .navbar > label, #hamburger {
        display: none;
    }

    .navbar > label {
        display: inline-block;
        float: left;
        color: white;
        background: var(--navbar_active_color);
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .navbar > label:hover {
        background-color: var(--navbar_hover_color);
    }


    .hamitems > a {
        /*
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        */
        box-sizing: border-box;
        display: block;
        width: 100%;
        border-top: 1px solid #333;
    }

    .hamitems {
        display: none;
    }

    .navbar input:checked ~ .hamitems {
        display: block;
    }

    .navbar input:checked ~ label {
        background: var(--navbar_hover_color);
    }


    .hamitems > a:hover {
        background-color: var(--navbar_hover_color);
    }


}

@media only screen and (max-width: 1200px) and (min-width: 971px) {
    .recentTitle > h3 {
        font-size : 25px;
    }

    .sideDiv > ul > li {
        font-size : 17px;
    }
}

@media only screen and (max-width: 970px) and (min-width: 769px) {
    .sideDiv {
        width: var(--recent_article_grid_size);
        /*height: 240px;*/
        padding: var(--padding_spaces);
        margin-bottom: var(--margin_spaces);
        background-color: var(--article_color);
    }

    .sideImage {
        float: left;
        width: 40%;
        padding-right: var(--padding_spaces);
    }
}

@media only screen and (max-width: 768px) {

    :root{
        --padding_spaces: 10px;
        --margin_spaces: 20px;
        --vertical_padding_spaces: 10px;
        --vertical_margin_spaces: 30px;
    }

    h1,h2,h3,h4,h5,h6{
        margin-top:10px;
        padding-left:10px;
        padding-right:10px;
    }

    .recentImage {
        width: 100%;
    }
    .recentArticle{
        display: flex;
        flex-direction: column;
    }
    .recentTitle{
        order:-1;
    }

    .generalBlock {
        /*padding-top: var(--padding_spaces);*/
        margin-bottom: var(--vertical_margin_spaces);
        padding-top: var(--vertical_padding_spaces);
        padding-bottom: var(--vertical_padding_spaces);
        /*box-shadow: 0 0 5px #a1bb73;*/
        /*box-shadow: 5px 5px 5px grey;*/
    }
}

h1, h2, h3, h4, h5, h6 {}

h1{
font-size:30px;
}
h2{
    font-size:27px;
}
h3{
    font-size:24px;
}
h4{
    font-size:15px;
}
h5{
    font-size:12px;
}
h6{
    font-size:8px;
}